<template>
<div>
  <Navigation ref="nav_ref" @callbackComponent="callbackComponent"/>
  <!-- 导航栏 -->
  <h1 class="text-hide ny_banner" v-for="(item,index) in banner" :key="index"
      :style="{background:'url('+item.url+') no-repeat center  50%/cover'}">招聘</h1>
  <div class="container ny_content">
    <div class="ny_nav">
      <div class="ny_nav_h">
        <div>
          <h2>联系我们</h2>
          <p>RECRUITING TALENTS</p>
        </div>
      </div>
      <div class="ny_nav_dqwz">
        当前位置：联系我们
      </div>
    </div>
    <div class="ny_view">
      <div id="lxwm_xx">
        <h3 v-if="systemSet.web_site_title">{{ systemSet.web_site_title }}</h3>
        <p v-if="systemSet.web_site_hotline">电话：{{ systemSet.web_site_hotline }}</p>
        <p v-if="systemSet.web_site_email">邮箱：{{ systemSet.web_site_email }}</p>
        <p v-if="systemSet.web_site_address">地址：{{ systemSet.web_site_address }}</p>
      </div>

      <h3>位置信息</h3>
      <div id="lxwm_map" class="amap-warp">
        <el-amap ref="map" vid="amapDemo" :amap-manager="amapManager" :center="center" :zoom="zoom" :events="events" class="amap-demo">
          <el-amap-marker v-for="(item,index) in circle"
                          :key="index"
                          :position="item.center">
          </el-amap-marker>

          <!-- 店铺信息 -->
          <el-amap-marker v-for="(item, index) in shopList" :position="item.position" zIndex="1000" :content="item.content" :offset="item.offset" :key="item.id" :vid="index"></el-amap-marker>
        </el-amap>



<!--        <iframe src="https://apis.map.qq.com/uri/v1/marker?marker=coord:31.830471,117.232967;title:合肥安玛尔市场信息咨询有限公司;addr:格林豪泰旁5栋1单位704&referer=myapp"  frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes"></iframe>-->
      </div>
    </div>
  </div>
  <Footer />
</div>
</template>

<script>
import Navigation from '../../components/Navigation'
import Footer from '../../components/Footer'
import {AMapManager, lazyAMapApiLoaderInstance} from 'vue-amap'
let amapManager = new AMapManager()
//样式
import styleCss from './style'
export default {
  name: 'index',

  components: {
    Navigation,
    Footer
  },
  data(){
    let _this = this
    return{
      amapManager,
      systemSet:[],
      title:'',
      address:'',
      zoom: 20,
      center: [0, 0],
      banner: [],
      circle:[],
      shopList:[],
      events: {
        init(o) {
          lazyAMapApiLoaderInstance.load().then(() => {
            _this.initMap()
          })
        }
      },
    }
  },
  created(){
    this.utils.systemConfig(1).then(res=>{
      if (res.data.code !== 200) return false
      window.sessionStorage.setItem('title',  res.data.data.content.web_site_title)
      window.sessionStorage.setItem('address', res.data.data.content.web_site_address)
    });
  },
  methods: {
    initMap() {
      this.map = amapManager.getMap()
      const lng = '117.232967'
      const lat = '31.830471'
      const json = {}
      json.center = [lng, lat]
      this.circle.push(json)
      this.center = [lng, lat]
      this.shopList = [{
          position:  this.center,
          content: `<div style='${styleCss.shopInfoWarp}'><span style='${styleCss.shopInfoSpan}'>${window.sessionStorage.getItem('title')}</span><br/>
<span style='${styleCss.shopInfoSpan}'>${window.sessionStorage.getItem('address')}</span></div>`,
          offset: [0, 0],
      }]
    },
    callbackComponent (params) {
      params.function && this[params.function](params.data)
    },
    getBannerList (data) {
      this.banner = data.image
    },
  }
}
</script>

<style scoped>
.amap-warp {
  height: 85vh;
}
</style>
